import CommonImgsLoad from '@/components/CommonImgsLoad';
import CommonLoading from '@/components/CommonLoading';
import { Button, Form, Input, InputNumber, Popover, message } from 'antd';
import React, { useState, useMemo } from 'react';
import { useNavigate } from 'react-router-dom';
import AntdWrapper from '../common/AntdWarp/index';
import styles from './index.module.less';
import { applyFor } from './service';
import nzhcn from 'nzh/cn';//直接使用简体中文

const offlineRecharge = () => {
  const [form] = Form.useForm();

  const [upperMoney, setUpperMoney] = useState(0); //需要实时转换成大写金额
	const navigate = useNavigate();
  const [loading, setLoading] = useState(false);

  //点击复制
  const copyText = async (textToCopy) => {
    // navigator clipboard 需要https等安全上下文
    if (navigator.clipboard && window.isSecureContext) {
      // navigator clipboard 向剪贴板写文本
      await navigator.clipboard
        .writeText(textToCopy)
        .then(() => {
          message.success('复制成功！');
        })
        .catch(() => {
          message.warning('复制失败');
        });
    } else {
      // 创建text area
      let textArea = document.createElement('textarea');
      textArea.value = textToCopy;
      // 使text area不在viewport，同时设置不可见
      textArea.style.position = 'absolute';
      textArea.style.opacity = 0;
      textArea.style.left = '-999999px';
      textArea.style.top = '-999999px';
      document.body.appendChild(textArea);
      textArea.focus();
      textArea.select();
      return new Promise((res, rej) => {
        // 执行复制命令并移除文本框
        document.execCommand('copy') ? res() : rej();
        textArea.remove();
      })
        .then(() => {
          message.success('复制成功！');
        })
        .catch(() => {
          message.warning('复制失败');
        });
    }
  };

  const onFinish = () => {
    if (loading) {
      return false;
    }
    form
      .validateFields()
      .then(async (val) => {
        setLoading(true);
        const { success, data } = await applyFor({ ...val });
        if (success) {
          if (data) {
            message.success('提交成功！');
            form.resetFields();
            let timer = setTimeout(() => {
              navigate('/account/offlineRechargeList', { state: {type: 'jump' }});
              clearTimeout(timer);
              timer = null;
            }, 200);
          }
        }
        setLoading(false);
      })
      .catch((err) => {});
  };

  //图片上传
  const handleCreditImgUpload = (val) => {
    form.setFieldsValue({
      imgUrl: val,
    });
  };

  //充值金额的改变
  const moneyChange = (e) => {
    if (e) {
      setUpperMoney(e);
    } else {
      setUpperMoney(0);
    }
  };

  //渲染金额大写
  const upperMoneyRender = useMemo(() => {
    if (upperMoney) {
      return `${nzhcn.encodeB(upperMoney)}圆`;
    }
  }, [upperMoney]);

  return (
    <div className="zjf-container-nof">
      <div className={styles.attentionBox}>
        <h3 className={styles.attentionTitle}>注意事项：</h3>
        <p>1、请正确填写对应的支付订单号以及对应的支付金额。</p>
        <p>2、该操作建议最小充值金额一万起。</p>
        <p>
          3、线下充值账号为：zjf18936204735@163.com，充值前请确认，以防充值失败
        </p>
        <p>
          4、财务充值时间将在每周一到周五的早上9点到下午18点之间进行充值，若遇到节假日则顺延充值。
        </p>
      </div>
      <br />
      <div className={styles.formContentBox}>
        <h3 className="zjf-container">线下充值详情</h3>
        <Form
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 9 }}
          form={form}
          name="offline-recharge-index"
          layout="horizontal"
          onFinish={onFinish}
          initialValues={{}}
        >
          <Form.Item
            rules={[{ required: true, message: '请上传截图' }]}
            label={
              <span style={{ fontWeight: '500' }}>支付宝充值账单详情截图</span>
            }
            name="imgUrl"
            extra="建议图片大小尽量保持在10mb内"
          >
            <CommonImgsLoad
              //   img={data.goodCreditImage}
              className="middle"
              handleOk={handleCreditImgUpload}
            />
            <Popover
              trigger="click"
              content={
                <div style={{ width: '300px', height: '600px' }}>
                  <img
                    style={{ width: '100%', height: '100%' }}
                    src="https://imgniu.zhaojiafang.com/front-web/ERP/shitijietu.png"
                  />
                </div>
              }
            >
              <a>查看示例</a>
            </Popover>
          </Form.Item>

          <Form.Item
            label={
              <span style={{ fontWeight: '500' }}>{APP_TITLE}支付宝充值账号</span>
            }
          >
            <div style={{ display: 'flex' }}>
              <a>zjf18936204735@163.com</a>
              <a
                onClick={() => copyText('zjf18936204735@163.com')}
                style={{ marginLeft: '16px' }}
              >
                点击复制
              </a>
            </div>
          </Form.Item>

          <AntdWrapper>
            <Form.Item
              label="已方充值支付宝账号"
              rules={[{ required: true, message: '请输入已方充值支付宝账号' }]}
              name="alipayAccountNo"
            >
              <Input
                size="default"
                placeholder="请输入已方充值支付宝账号"
                maxLength={100}
              ></Input>
            </Form.Item>
          </AntdWrapper>

          <Form.Item
            label={<span className={styles.labelReqire}>充值的金额</span>}
            //   rules={[{ required: true, message: '请输入充值的金额' }]}
            //   name="amount"
          >
            <div style={{ display: 'flex' }}>
              <AntdWrapper>
                <Form.Item
                  rules={[{ required: true, message: '请输入充值的金额' }]}
                  name="amount"
                  noStyle
                >
                  <InputNumber
                    size="default"
                    onChange={moneyChange}
                    min={1}
                    max={99999999.99}
                    precision={2}
                    placeholder="请输入充值的金额"
                    style={{ width: '300px' }}
                  ></InputNumber>
                </Form.Item>
              </AntdWrapper>
              <div className={styles.upperMoney}>{upperMoneyRender}</div>
            </div>
          </Form.Item>

          <AntdWrapper>
            <Form.Item
              label="充值的订单号或流水号"
              rules={[
                { required: true, message: '请输入充值的订单号或流水号' },
              ]}
              name="alipayOrderSn"
            >
              <Input
                size="default"
                maxLength={100}
                placeholder="请输入充值的订单号或流水号"
              ></Input>
            </Form.Item>
          </AntdWrapper>

          <Form.Item label=" " colon={false}>
            <Button
              htmlType="submit"
              shape="round"
              size="default"
              type="primary"
            >
              确定提交
            </Button>
          </Form.Item>
        </Form>
      </div>
      <CommonLoading loading={loading} />
    </div>
  );
};

export default React.memo(offlineRecharge, () => {
  return true;
});
